$(function() {
    // 搜索统计
    // 每日搜索次数
    var dailySearchChart = echarts.init(document.getElementById("echarts-dailySearch"));
    axios.get("http://127.0.0.1:8000/statistics/?field=search").then(
            function(response) {
                var resp = response.data
                var date = resp['title_list']
                var data = resp['data_list']
                console.log(resp)
                dailySearchChart.setOption({
                    title: {
                        text: '每日搜索次数'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['搜索次数']
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: date
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    series: [{
                        name: '搜索次数',
                        type: 'line',
                        data: data,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }, ]
                });

                $(window).resize(dailySearchChart.resize);
            },
            function(err) {
                console.log(err)
                $(window).resize(dailySearchChart.resize);
            }
        )
        // 关键词词频统计
    var wordFreqChart = echarts.init(document.getElementById("echarts-word_freq"));
    axios.get("http://127.0.0.1:8000/statistics/?field=word_freq").then(
            function(response) {
                var resp = response.data
                var title = resp['title_list']
                var data = resp['data_list']
                console.log(resp)
                wordFreqChart.setOption({
                    title: {
                        text: '关键词词频统计',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: title
                    },
                    calculable: true,
                    series: [{
                        name: '关键词',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data
                    }]
                });

                $(window).resize(wordFreqChart.resize);
            },
            function(err) {
                console.log(err)
                $(window).resize(wordFreqChart.resize);
            }
        )
        // 关键词词频统计条形图
    var wordFreqBarChart = echarts.init(document.getElementById("echarts-word_freq-bar"));
    axios.get("http://127.0.0.1:8000/statistics/?field=word_freq&style=bar").then(
        function(response) {
            var resp = response.data
            var title = resp['title_list']
            title = title.reverse()
            for (var i = 0; i < title.length; i++) {
                if (title[i].length > 10) {
                    title[i] = title[i].substring(0, 10) + '...'
                }
            }
            var data = resp['data_list']
            data = data.reverse()
                // if (data.length > 10) {
                //     for (var i = 0; i < data.length; i++) {
                //         dt = data[i]
                //         if (dt['name'].length > 10) {
                //             dt['name'] = dt['name'].substring(0, 10) + '...'
                //         }
                //     }
                // }
            console.log(resp)
            wordFreqBarChart.setOption({
                title: {
                    text: "",
                    left: 40,
                    top: 40,
                    textStyle: {
                        fontSize: 60,
                        color: "#fff",
                    },
                },
                // 坐标轴
                grid: {
                    top: "15%",
                    left: "5%",
                    right: "3%",
                    bottom: "5%",
                    containLabel: true, //是否包含坐标轴的文字
                },
                // X轴：横向柱状图，将xAxis的type设置为value
                xAxis: {
                    type: "value",
                },
                // Y轴：横向柱状图，将xAxis的type设置为category
                yAxis: {
                    type: "category",
                    data: title,
                },
                // 图表内容
                series: [{
                    type: "bar", // 图表类型
                    data: data, // 数据
                    barWidth: 66, // 柱的宽度
                    // 柱上面的数值配置
                    label: {
                        show: true, // 显示值
                        position: "right", // 显示位置
                        color: "white",
                    },
                    // 每一个条目的样式配置
                    itemStyle: {
                        barBorderRadius: [0, 34, 34, 0], // 圆角
                        // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                        color: new this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: "#5050ee" },
                            { offset: 1, color: "#ab6ee5" },
                        ]),
                    },
                }, ],
                // 提示框设置
                tooltip: {
                    trigger: "axis", //触发类型——坐标轴
                    // 鼠标移入条目下面的背景
                    axisPointer: {
                        type: "line",
                        z: 0,
                        lineStyle: {
                            color: "rgba(225,225,225,.3)",
                            width: 65,
                        },
                    },
                    formatter: (params) => {
                        // console.log('params', params)
                        return params[0].name + `<br/> ` + `搜索：` + params[0].value + `次`;
                    },
                    axisPointer: {
                        type: 'shadow'
                    }
                },
            })

            $(window).resize(wordFreqBarChart.resize);
        },
        function(err) {
            console.log(err)
            $(window).resize(wordFreqBarChart.resize);
        }
    )
})